<template>
	<view>
		<template v-if="state!='屏蔽'">
			<!-- 帖子内容区 -->
			<view class="topicContent">
				<view><h3>{{notice.title}}</h3></view>
				<view class="essay">
					<view>
						<image @tap="ViewImage(notice.userHead)" :src="notice.userHead"></image>
					</view>
					<view class="essayName">
						<view v-show="notice.essayName">作者：{{notice.essayName}}</view>
						<view v-show="notice.essayName">
							<image src="../../static/index/time.png"></image> <text>{{notice.time}}</text>
						</view>
					</view>
				</view>
				<view v-html="notice.content">{{notice.content}}</view>
				<view>
					<view>
						<image src="../../static/index/look.png"></image><text>{{notice.reads}}</text>
					</view>
					<view>
						<image src="../../static/index/talk.png"></image><text>{{notice.commentSum}}</text>
					</view>
				</view>
			</view>
			<!-- 评论区 -->
			<view>

				<view class="talkTitle"><text>|</text><text id="togo">评论区</text></view>
				<template v-if="talkList">
					<view class="talkList" v-for="(item,index) in talkList" :key='index'>
						<view class="talkListUser">
							<image @tap="ViewImage(item.userHead)" :src="item.userHead"></image><text> {{item.fromUserName}}:</text>
						</view>
						<view class="replyMoudule">
							<view @tap="textareaClick(index)" class="talkListContent">{{item.content}}</view>
							<view class="talkListTime">{{item.time}}<text>回复</text><text @click="myDelect(item.id)" style="color: #02A7F0;" v-if="item.from_uId==userId">删除</text></view>
							<!-- 留言区 -->
							<view class="reply">
								<view v-for="(item2,index2) in item.comments.slice(0,2)" :key="index2" class="replyList" @click="toTopicDetail(index)"
								 data-target="bottomModal">
									<view class="replyListUserName">
										<text>{{item2.fromUserName}}</text>
										<text v-if='true'>回复</text>
										<text v-if='true'>{{item2.commentUserName}}</text>:
									</view>
									<text>{{item2.content}}</text>
								</view>
								<view v-if="item.comments.length>0" class="surplus">查看详情></view>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<no-talk></no-talk>
				</template>
			</view>

		</template>
		<template v-else>
			<ping-bi></ping-bi>
		</template>
		<!-- 占位div -->
		<view class="placeholder"></view>
		<!-- 底部导航 -->
		<view class="bottomNav" v-show="isTextareaClick">
			<view><textarea @tap="textareaClick()" disabled="true" placeholder="我来说两句" placeholder-style="color:#8d8d8d;" />
				</view>
			<view><image :src="butUrl" @click="isCollect()"></image></view>
		</view>
		<!-- 回复框 -->
		<view @touchmove.stop.prevent="moveHandle" class="sendModel" v-show="isTopicModel">
			<view class="sendContent" >
			<view class="sendBut"><text @tap="hiddenSendModel()">取消</text><text style="color: #0081FF;" @tap="talkForTopic()" >发送</text></view>
			<view class="sendTextarea"><textarea :focus="focus" v-model="sendText" cursor-spacing='20' maxlength='250' :placeholder="placeholder"></textarea></view>
		</view>
	</view>
	
	</view>
</template>

<script>
	import noTalk from "../../components/common/no-talk.vue"
	import pingBi from "../../components/common/pingbi.vue"
	export default {
		components: {
			noTalk,
			pingBi
		},
		data() {
			return {
				butUrl: '../../static/topic/collect.png',
				talkList: [],
				iscollect: false,
				notice: {},
				modalName: null,
				isTextareaClick: true,
				isTopicModel: false,
				placeholder: '友善发言,理性讨论,阳光你我',
				focus: false,
				sendText: '',
				id: '',
				topicType: 1, //帖子类型
				commentSum: 0,
				collectionId: '',
				isShow: true,
				checkEd: -1,
				state: '',
				delect:false,
				userId:""
			};
		},
		created() {
			uni.startPullDownRefresh()
		},
		onReady() {
			this.getTopicDetailStorage();
			this.getCollection();
			this.getTopicDetail(this.id)
			this.userId = this.User.userInfo.id;
		},
		onLoad: function(data) {
			this.id = data.id;
			this.commentSum = data.commentSum;
		},
		methods: {
			//图片预览
			ViewImage(url) {
				var arr = [];
				arr.push(url)
				uni.previewImage({
					urls: arr,
					current: 0,
					success: (res) => {
						console.log(res)
					},
				});
			},
			//删除自己的评论
			myDelect(index){
				uni.showModal({
					title:"提示",
					content:"你确定要删除该条评论吗？",
					success: (res) => {
						if(res.confirm){
							uni.request({
								url:this.confige.webUrl+"/essay/delCommentEssay",
								header: {
										'X-Token': this.User.token
								},
								data:{
									id:index
								},
								success: (res) => {
									console.log(res);
									if(res.data.code){
										uni.showToast({
											title:'删除成功'
										})
										this.getReply(this.id);
									}
									else{
										uni.showToast({
											title:res.data.message
										})
										this.getReply(this.id);
									}
								}
							})
						}
					}
				})
			
			},
			//对帖子发表评论
			talkForTopic() {
				// console.log(this.sendText);
				//回复
				if (this.checkEd > -1) {
					console.log(this.sendText);
					uni.request({
						url: this.confige.webUrl + "/essay/comment",
						header: {
							'X-Token': this.User.token
						},
						data: {
							essayId: this.notice.id,
							content: this.sendText,
							topicType: 2,
							commentId: this.talkList[this.checkEd].id,
						},
						method: "POST",
						success: (res) => {
							console.log(res)
							if (res.data.code == 400) {
								uni.showToast({
									icon: "none",
									title: res.data.message
								})
							}
							this.hiddenSendModel();
							this.getReply(this.id)
						}
					})
				}
				//评论
				else {
					uni.request({
						url: this.confige.webUrl + "/essay/comment",
						header: {
							'X-Token': this.User.token
						},
						data: {
							essayId: this.notice.id,
							content: this.sendText,
							topicType: 1,
							commentId: this.notice.id,
						},
						method: "POST",
						success: (res) => {
							console.log(res)
							if (res.data.code == 400) {
								uni.showToast({
									icon: "none",
									title: res.data.message
								})
							}
							this.hiddenSendModel();
							this.getReply(this.id)
						}
					})
				}
			},
			//获取评论信息
			getReply(id) {
				if (this.state === "屏蔽") {
					return;
				}
				// console.log(id)
				uni.request({
					url: this.confige.webUrl + "/essay/listCommentEssay",
					header: {
						'X-Token': this.User.token
					},
					data: {
						id: id,
					},
					success: (res) => {
						this.talkList = res.data.result;
						console.log(this.talkList);
						if(this.talkList[0].from_uId==this.User.userInfo.id){
							this.delect==true;
						}
						else{
							this.delect==false;
						}
					}
				})
			},
			//获取帖子缓存
			getTopicDetailStorage() {
				uni.getStorage({
					key: 'notice' + this.id,
					success: (res) => {
						console.log(res.data);
						this.notice = res.data;
						uni.stopPullDownRefresh();
						this.isShow = true;
					}
				})
			},
			//获取帖子详细信息
			getTopicDetail(id) {
				uni.request({
					url: this.confige.webUrl + "/essay/listEssayByUserIdAndEssayId",
					header: {
						'X-Token': this.User.token
					},
					data: {
						essayId: id,
					},
					success: (res) => {
						console.log(res);
						this.state = res.data.result[0].state;
						if (res.data.result[0].state === "屏蔽") {
							uni.removeStorageSync('notice' + this.id);
							return;
						}
						this.getReply(this.id);
						this.notice = res.data.result[0];
						var a = this.notice.content;
						var b=/<IMG src=\"([^\"]*?)\">/gi;
						var s=a.match(b)
						
						 for(var i= 0;i<s.length;i++)
						{
							console.log(s[i].replace(b,"$1"))
						}
						
						uni.setStorage({
							key: 'notice' + this.id,
							data: res.data.result[0],
						});
						uni.stopPullDownRefresh();
						this.isShow = true;
					}
				})
			},
			//获取收藏id
			getCollection() {
				uni.request({
					url: this.confige.webUrl + "/essay/selCollection",
					header: {
						'X-Token': this.User.token
					},
					data: {
						essayId: this.id,
					},
					success: (res) => {
						// console.log(res)
						if (res.data.code == 400) {
							this.collectionId = "";
							this.butUrl = '../../static/topic/collect.png';
						} else if (res.data.code == 200) {
							this.collectionId = res.data.result[0].collectionId;
							this.butUrl = '../../static/topic/collected.png'
						}
					}
				})
			},
			//收藏帖子
			isCollect() {
				console.log(this.notice.userId)
				console.log(this.User.userInfo.id)
				if(this.notice.userId == this.User.userInfo.id){
					uni.showToast({
						title:"不能收藏自己的帖子！",
						icon:"none"
					});
					return;
				}
				if (!this.collectionId) {
					//添加收藏
					uni.request({
						url: this.confige.webUrl + "/essay/userCollection",
						header: {
							'X-Token': this.User.token
						},
						data: {
							essayId: this.id,
						},
						success: (res) => {
							// console.log(res)
							if (res.data.code == '200') {
								this.butUrl = '../../static/topic/collected.png'
								uni.showToast({
									title: '已收藏'
								})
							}
							this.getCollection()
						}
					})
				} else {
					// 取消收藏
					uni.request({
						url: this.confige.webUrl + "/essay/delUserCollection",
						header: {
							'X-Token': this.User.token
						},
						data: {
							id: this.collectionId,
						},
						success: (res) => {
							if (res.data.code == '200') {
								this.butUrl = '../../static/topic/collect.png';
								this.collectionId = ""
								uni.showToast({
									title: '已取消收藏'
								})
							}
							this.getCollection()
						}
					})

				}
			},
			//回复详情
			toTopicDetail(index) {
				uni.navigateTo({
					url: './replyDetail?index=' + index + '&topicId=' + this.id
				})
			},
			//评论框点击事件
			textareaClick(index) {
				if (this.state === "屏蔽") {
					return;
				}
				this.isTopicModel = true;
				this.isTextareaClick = false;
				this.focus = true;
				if (index > -1) {
					this.checkEd = index;
					this.placeholder = "回复" + this.talkList[index].fromUserName;
				} else {
					this.checkEd = -1;
					this.placeholder = '友善发言,理性讨论,阳光你我';
				}
			},
			//隐藏评论框
			hiddenSendModel() {
				this.isTopicModel = false;
				this.isTextareaClick = true;
				this.sendText = '';
				this.focus = false;
				this.placeholder = '友善发言,理性讨论,阳光你我';
				this.checked = -1;
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #FFFFFF;
	}

	@import '../../common/global.less';
	@import '../../common/main.css';
	@import "../../common/icon.css";

	.Image {
		width: 50rpx;
		height: 50rpx;
		margin: auto;
	}

	.talkList {
		width: 98%;
		margin: auto;
		margin-top: 15upx;

		.talkListUser {
			font-size: @fontSize;
			font-weight: bold;
			letter-spacing: 5upx;
			display: flex;
			align-items: flex-start;

			text {
				padding-left: 15rpx;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 100%;
			}
		}

		.replyMoudule {
			margin-top: -40rpx;
			width: 86%;
			margin-left: 95rpx;
			padding-bottom: 10upx;
		}

		.talkListTime {
			color: @fontcolor;
			font-size: @fontSize;
			padding-top: 10upx;

			>text {
				padding-left: 10upx;
				color: #000000;
			}
		}

		.reply {
			background-color: #f0f0f0;
			color: #000000;
			font-size: 28upx;
			margin-top: 10upx;
			border-radius: 20upx;

			.replyList {
				padding: 10upx;

				>text {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
			}

			.replyListUserName {
				font-weight: bold;

				>text:nth-of-type(2) {
					color: @fontcolor;
					margin-left: 10upx;
				}

				>text:nth-of-type(3) {
					margin-left: 10upx;
				}
			}

			.surplus {
				color: #0081FF;
				padding: 0upx 10upx 10upx 10upx;
			}
		}

		.talkListContent {
			font-size: 30upx;
		}
	}

	.talkTitle {
		width: 98%;
		margin: auto;
		margin-top: 20upx;

		>text:nth-of-type(1) {
			color: #007AFF;
			font-weight: bold;
			padding-left: 10upx;
		}

		>text:nth-of-type(2) {
			font-size: 30upx;
			padding-left: 10upx;
		}
	}

	.topicContent {
		width: 94%;
		border-radius: 40upx;
		margin: auto;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		padding: 0rpx 15rpx 15rpx 15rpx;

		>view:nth-of-type(1) {
			padding-bottom: 10upx;
			padding-top: 10upx;
		}

		.essay {
			height: 110rpx;
			display: flex;
			align-items: center;
			flex-direction: row;

			view:nth-of-type(1) {
				padding-top: 10rpx;

				image {
					height: 90rpx;
					width: 90rpx;
					border-radius: 100%;
				}
			}

			.essayName {
				padding-left: 10rpx;
			}

			.essayName>view:nth-of-type(1) {
				padding-bottom: 10upx;
				font-size: 28rpx;
			}

			.essayName>view:nth-of-type(2) {
				display: flex;
				justify-content: flex-start;
				color: @fontcolor;
				font-size: 25upx;

				>image {
					width: 35upx;
					height: 35upx;
				}

				>text {
					display: block;
					float: left;
					line-height: 35upx;
				}
			}
		}

		view:nth-of-type(3) {
			padding-top: 15upx;
			font-size: 30upx;
			color: #333;
		}

		view:nth-of-type(4) {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			color: @fontcolor;
			height: 30upx;
			font-size: 25upx;
			padding-top: 10upx;

			>view {
				margin-right: 30upx;
				display: flex;
			}

			>view:nth-of-type(2) {}

			>view>image {
				width: 35upx;
				height: 35upx;
			}

			>view>text {
				display: block;
				float: right;
				line-height: 35upx;
				padding-left: 10upx;
			}
		}
	}

	// 占位
	.placeholder {
		width: 100%;
		height: 100rpx;
	}

	//发送框
	.sendTextarea {
		width: 94%;
		margin: auto;

		>textarea {
			background-color: #F2F2F2;
			margin-bottom: 50rpx;
			width: 100%;
			font-size: 28rpx;
			height: 170rpx;
			border-radius: 20rpx;
			padding: 10rpx;
		}
	}

	.sendModel {
		background-color: @uni-bg-color-mask;
		position: fixed;
		top: 0;
		height: 100%;
		width: 100%;
		z-index: 1;

		.sendContent {
			position: absolute;
			background-color: #FFFFFF;
			bottom: 0;
			width: 100%;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
		}

		.sendBut {
			width: 90%;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			color: #888888;
		}
	}

	.bottomNav {
		position: fixed;
		bottom: 0;
		border-top: 1upx solid #e1e1e1;
		width: 100%;
		height: 90upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;

		>view:nth-of-type(1) {
			width: 64%;

			textarea {
				width: 80%;
				font-size: 25upx;
				height: 50upx;
				margin: auto;
				border-radius: 20upx;
				padding: 8upx 5upx 5upx 15upx;
				background-color: #f0f0f0;
			}
		}

		>view:nth-of-type(2) {
			width: 36%;
			display: flex;
			align-items: center;

			button {
				height: 50upx;
				line-height: 50upx;
				font-size: 30upx;
				margin-left: 10upx;
			}

			image {
				height: 40upx;
				width: 40upx;
				margin-right: 80upx;
			}
		}
	}
</style>
